﻿@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="FormLayout#ItemWrapping" />Item Wrapping</h2>
    <p>
        All <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout#layout-items">layout items</a> are rendered as <b>.col</b> elements within a single <b>.row</b> container by default. An item moves to the next row if there are not enough columns within the current row. You can also use an item’s <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutItem.BeginRow">BeginRow</a> property to explicitly indicate that it should be placed onto a new row.
    </p>
    <p>
        Refer to the <a href="https://getbootstrap.com/docs/4.0/layout/grid/" target="_blank">Bootstrap documentation</a> for additional information on the Bootstrap Grid system.
    </p>
</div>

<div class="card demo-card-wide demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                @nameof(Address)=<b>@Address</b>, @nameof(City)=<b>@City</b>, @nameof(ZipCode)=<b>@ZipCode</b>, @nameof(Country)=<b>@Country</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-body card-body-fl">
        <DxFormLayout ItemSizeMode="SizeMode" @key="@ThemeName">
            <DxFormLayoutItem Caption="Address:" ColSpanMd="12">
                <Template>
                    <DxTextBox @bind-Text="@Address"></DxTextBox>
                </Template>
            </DxFormLayoutItem>

            <DxFormLayoutItem Caption="City:">
                <Template>
                    <DxTextBox @bind-Text="@City"></DxTextBox>
                </Template>
            </DxFormLayoutItem>

            <DxFormLayoutItem Caption="Postal/ZIP Code:" BeginRow="true">
                <Template>
                    <DxTextBox @bind-Text="@ZipCode"></DxTextBox>
                </Template>
            </DxFormLayoutItem>

            <DxFormLayoutItem Caption="Country:" BeginRow="true">
                <Template>
                    <DxTextBox @bind-Text="@Country"></DxTextBox>
                </Template>
            </DxFormLayoutItem>

        </DxFormLayout>
    </div>
</div>

<CodeSnippet_FormLayout_Default_Wrapping />

@code {
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }

    string Address { get; set; } = "120 Hanover Sq.";
    string City { get; set; } = "London";
    string ZipCode { get; set; } = "WA1 1DP";
    string Country { get; set; } = "UK";
}
